<page-header title="{{'deliveryForOrder'|translate}}">
    <ng-template #action>
        <button nz-button (click)="back()"><i class="anticon anticon-rollback"></i>{{'goback' | translate}}</button>
    </ng-template>
    <ng-template #breadcrumb>
        <nz-breadcrumb>
            <nz-breadcrumb-item><a [routerLink]="['/workplace/list']">{{'workplace' | translate}}</a></nz-breadcrumb-item>
            <nz-breadcrumb-item>{{'deliveryForOrder'|translate}}</nz-breadcrumb-item>
        </nz-breadcrumb>
    </ng-template>
</page-header>


<nz-card>
    <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-row [nzGutter]="8">
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="orderId">{{'orderId' | translate}}</nz-form-label>
                    <nz-form-control>
                        <input nz-input [(ngModel)]="q.orderId" name="orderId" id="orderId">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="user">{{'user' | translate}}</nz-form-label>
                    <nz-form-control>
                        <nz-input-group nzSearch [nzSuffix]="suffixButton">
                            <input type="text" [(ngModel)]="q.username" nz-input name="username">
                        </nz-input-group>
                        <ng-template #suffixButton>
                            <button (click)="showUserSelect()" nz-button nzType="default" nzSearch><i class="anticon anticon-ellipsis"></i></button>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="status">{{'status' | translate}}</nz-form-label>
                    <nz-form-control>
                        <nz-select [(ngModel)]="q.pending" name="pending" nzAllowClear nzShowSearch>
                            <nz-option [nzLabel]="status.text" [nzValue]="status.value" *ngFor="let status of statuss"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzMd="4" nzSm="24">
                <nz-form-item>
                    <nz-form-control>
                        <nz-range-picker name="cdate" [nzFormat]="dateFormat" [(ngModel)]="q.dateRange" (ngModelChange)="dateChange($event)"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>

            <nz-col nzMd="4" nzSm="24">
                <button nz-button type="button" [nzType]="'primary'" (click)="st.load(1, q)">{{'search' | translate}}</button>
            </nz-col>
        </nz-row>
    </form>
</nz-card>

<simple-table #st [columns]="columns" [data]="url" [ps]="ps" [extraParams]="q" [resReName]="{ total: 'data.total', list: 'data.rows'}"
    [reqReName]="{pi:'pageNumber', ps: 'pageSize'}" toTopInChange [showTotal]="true" [showPagination]="true">
    <ng-template st-row="brand" let-item let-index="index">
        {{item.brand | brandEnPipe | uppercase}}
    </ng-template>
    <ng-template st-row="wf" let-item let-index="index">
        {{item.qty - item.sendQty}}
    </ng-template>
</simple-table>

<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px - 120px)', overflow: 'hidden', 'padding-bottom':'53px' }"
    [nzMaskClosable]="false" [nzClosable]="false" [nzWidth]="720" [nzVisible]="visible" [nzTitle]="drawerHeader"
    (nzOnClose)="close()">
    <ng-template #drawerHeader>
        <nz-card style="margin: -16px -24px;margin-bottom: -14px !important;" class="ant-card__body-nopadding"
            [nzBordered]="false">
            <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" [nzGutter]="8">
                <div nz-col [nzSpan]="16">
                    <div style="padding: 0px 19px;">
                        <h3>#{{currentRow.orderId}}</h3>
                        Shipped
                        <strong class="display-2 text-blur">{{(currentRow.sendQty / currentRow.qty * 100).toFixed(0)}}%</strong>
                        <nz-progress [nzStatus]="'active'" [nzPercent]="currentRow.sendQty / currentRow.qty * 100"
                            [nzShowInfo]="false" [nzStrokeWidth]="5"></nz-progress>
                    </div>
                </div>
                <div nz-col [nzSpan]="8" class="my-md pl-md border-left-1">
                    <div style="display:inline-block;text-align: center; margin-right: 20px">
                        <p>Qty</p>
                        <strong class="display-3">{{currentRow.qty}}</strong>
                    </div>
                    <div style="display:inline-block;text-align: center; margin-right: 20px">
                        <p>Shipped</p>
                        <strong class="display-3">{{currentRow.sendQty}}</strong>
                    </div>
                    <div style="display:inline-block;text-align: center; ">
                        <p>Unshipped</p>
                        <strong class="display-3">{{currentRow.qty - currentRow.sendQty}}</strong>
                    </div>
                </div>
            </div>
        </nz-card>
    </ng-template>
    <nz-spin [nzSpinning]="loading">
        <div style="margin: -14px;">
            <form nz-form [nzLayout]="'inline'">
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="15">
                        <nz-form-item>
                            <nz-form-label>Barcode</nz-form-label>
                            <nz-form-control>
                                <nz-input-group nzPrefixIcon="anticon anticon-barcode">
                                    <input type="text" autocomplete="off" (keyup)="send($event)" nz-input name="barcode"
                                        [(ngModel)]="barcode" placeholder="Enter or scan barcode">
                                </nz-input-group>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="9" class="pl-md border-left-1">

                    </div>
                </div>
            </form>
            <simple-table #st1 style="margin-top: 10px" [scroll]="{ y: '450px' }" [showPagination]="false"
                [columns]="subColumns" [data]="currentRow.details">
                <ng-template st-row="wf" let-item let-index="index">
                    {{item.qty - item.sendQty}}
                </ng-template>
            </simple-table>
        </div>
    </nz-spin>
    <div class="footer">
        <button nz-button type="button" [nzLoading]="loading" (click)="close()" nzType="primary" style="margin-right: 8px;"><span>Close</span></button>
    </div>
</nz-drawer>